import * as React from 'react';
import { Color } from '../model/color'  // model 从模型层引入

// 每个组件都要做参数约束，没有做共享的必要
interface Props {
    color: Color,
    onColorUpdated: (color:Color) => void
}

export const ColorPicker: React.FC<Props> = (props) => {
    const { color, onColorUpdated } = props
    return (
        <>
            <input
                type="range"
                min="0"
                max="255"
                value={color.red}
                onChange={event => 
                    onColorUpdated(
                        {
                            ...color,
                            red: +event.target.value
                        }
                    )
                }
            />
            {color.red}
            <br />
            <input
                type="range"
                min="0"
                max="255"
                value={color.green}
                onChange={event => 
                    onColorUpdated(
                        {
                            ...color,
                            green: +event.target.value
                        }
                    )
                }
            />
            {color.green}
            <br />
            <input
                type="range"
                min="0"
                max="255"
                value={color.blue}
                onChange={event => 
                    onColorUpdated(
                        {
                            ...color,
                            blue: +event.target.value
                        }
                    )
                }
            />
            {color.blue}
        </>
    )
}